<template>
    <div class="main">
        <Header></Header>
        <div class="banner">
            <swiper></swiper>
        </div>
        <div class="content">
            <el-container>
                <el-main class="mainBox">
                    <div class="warp">
                        <div class="title_box">
                            <div class="line_box">
                                <span class="line"></span>
                                <span class="title">个人空间</span>
                            </div>
                            <div class="more" @click="goSpace(0)">
                                <span>
                                    更多
                                    <i class="el-icon-arrow-right"></i>
                                </span>
                            </div>
                        </div>

                        <div class="space_wrap" v-loading="personalLoading" element-loading-text="数据加载中..."
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                            :data="personalSpaceList">
                            <div class="space_list" v-for="(item,index) in personalSpaceList" :key="index">
                                <div class="head_portrait">
                                    <div class="portrait">
                                        <el-avatar :size="60">
                                            <img :src="item.img | pictureUrl" @click="goSpaceOthers(item)" v-if="item.img !='null'"/>
                                            <img :src="item.sex == '1'?imgList[0].imgUrl:imgList[1].imgUrl" 
                                            @click="goSpaceOthers(item)" v-else/>
                                            <!-- <img :src="'group1/M00/08/6F/wKgBtF6580-AL2MxAAAxHtLMPLw570.jpg' | pictureUrl"  -->
                                            <!-- @click="goSpaceOthers(item)" v-else/> -->
                                        </el-avatar>
                                        <div
                                            v-if="userInfo.id&&userInfo.role_id !=1000&&userInfo.role_id !=7&&userInfo.role_id !=100011">
                                            <i @click="handleFollow(item)" v-if="item.flag == 1"
                                                class="follow_icon el-icon-success" style="color: #409EFF;"></i>
                                            <i @click="handleFollow(item)" v-else
                                                class="follow_icon el-icon-circle-plus"></i>
                                        </div>
                                    </div>
                                    <div class="follow"
                                        v-if="userInfo.id&&userInfo.role_id !=1000&&userInfo.role_id !=7&&userInfo.role_id !=100011">
                                        <span>{{item.flag == 1?'已关注':'关注'}}</span>
                                    </div>
                                </div>
                                <div class="space_detail">
                                    <div class="people" @click="goSpaceOthers(item)">
                                        <div class="occupation">
                                            <span>{{item.username}}</span>
                                            <span class="shiwei">{{item.className?item.className:item.rolename}}</span>
                                        </div>
                                        <div class="serving">
                                            <span class="serving_name">{{item.schoolName}}</span>
                                            <span>{{item.subjects}}</span>
                                        </div>
                                    </div>
                                    <div class="fans_visitor">
                                        <span>访客：{{item.visitorNum}}</span>
                                        <span>粉丝：{{item.beanNum}}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="empty" v-if="personalSpaceList.length<=0">
                                <i class="iconfont icon-icon"></i>
                                <label>暂无数据</label>
                            </div>
                        </div>
                    </div>

                    <div class="warp">
                        <div class="title_box">
                            <div class="line_box">
                                <span class="line"></span>
                                <span class="title">机构空间</span>
                            </div>
                            <div class="more" @click="goSpace(1)">
                                <span>
                                    更多
                                    <i class="el-icon-arrow-right"></i>
                                </span>
                            </div>
                        </div>

                        <div class="space_wrap" v-loading="dynamicLoading" element-loading-text="数据加载中..."
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                            :data="institutionsList">
                            <div class="space_list" v-for="(item,index) in institutionsList" :key="index">
                                <div class="head_portrait">
                                    <div class="portrait">
                                        <el-avatar :size="60">
                                            <img :src="item.img | pictureUrl" @click="goSpaceOthers(item)" v-if="item.img !='null'"/>
                                            <img :src="item.sex == '1'?imgList[0].imgUrl:imgList[1].imgUrl" 
                                            @click="goSpaceOthers(item)" v-else/>
                                            <!-- <img :src="'group1/M00/08/6F/wKgBtF6580-AL2MxAAAxHtLMPLw570.jpg' | pictureUrl" 
                                            @click="goSpaceOthers(item)" v-else/> -->
                                        </el-avatar>
                                        <!-- <div
                                            v-if="userInfo.id&&userInfo.role_id !=1000&&userInfo.role_id !=7&&userInfo.role_id !=100011">
                                            <i @click="handleFollow(item)" v-if="item.flag == 1"
                                                class="follow_icon el-icon-success" style="color: #409EFF;"></i>
                                            <i @click="handleFollow(item)" v-else
                                                class="follow_icon el-icon-circle-plus"></i>
                                        </div> -->
                                    </div>
                                    <!-- <div class="follow"
                                        v-if="userInfo.id&&userInfo.role_id !=1000&&userInfo.role_id !=7&&userInfo.role_id !=100011">
                                        <span>{{item.flag == 1?'已关注':'关注'}}</span>
                                    </div> -->
                                </div>
                                <div class="space_detail">
                                    <div class="people" @click="goSpaceOthers(item)">
                                        <div class="occupation">
                                            <span>{{item.username}}</span>
                                            <span class="shiwei">{{item.rolename?item.rolename:item.className}}</span>
                                        </div>
                                        <div class="serving">
                                            <span class="serving_name">{{item.schoolName}}</span>
                                            <span>{{item.subject}}</span>
                                        </div>
                                    </div>
                                    <div class="fans_visitor">
                                        <span>访客：{{item.visitorNum}}</span>
                                        <!-- <span>粉丝：{{item.beanNum}}</span> -->
                                    </div>
                                </div>
                            </div>

                            <div class="empty" v-if="institutionsList.length<=0">
                                <i class="iconfont icon-icon"></i>
                                <label>暂无数据</label>
                            </div>
                        </div>
                    </div>
                </el-main>

                <el-aside class="rightBox">
                    <div class="warp">
                        <div class="title_box">
                            <div class="line_box">
                                <span class="line"></span>
                                <span class="title">最新动态</span>
                            </div>
                            <div class="more" v-if="dynamicPage !=1" @click="changeTheBatch('dynamicL')">
                                <span>
                                    <i class="el-icon-arrow-left"></i>
                                    上一批
                                </span>
                            </div>
                            <div class="more" v-if="dynamicPage != headPortrait.pages"
                                @click="changeTheBatch('dynamic')">
                                <span>
                                    下一批
                                    <i class="el-icon-arrow-right"></i>
                                </span>
                            </div>
                        </div>

                        <div class="dynamic_wrap" v-loading="dynamicLoading" element-loading-text="数据加载中..."
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                            :data="headPortrait.list">
                            <div class="dynamic_list" v-for="(item,index) in headPortrait.list" :key="index">
                                <div class="head_portrait" @click="goSpaceOthers(item)">
                                    <!-- <el-avatar :size="60" :src="imgUrl+item.photo" @error="errorHandler">
                                        <img :src="imgUrl+item.photo" />
                                    </el-avatar> -->
                                    <el-avatar :size="40">
                                        <img :src="item.photo | pictureUrl" />
                                    </el-avatar>
                                </div>
                                <div class="character" @click="goSpaceOthers(item)">
                                    <div class="character_name clearFix">
                                        <span>{{item.username}}</span>
                                        <span>{{item.rolename}}</span>
                                        <span class="date_before">{{handleTime(item.creationtime)}}</span>
                                    </div>
                                    <div class="behavior">{{item.title.slice(0,12)}}</div>
                                </div>
                            </div>
                            <div class="empty" v-if="headPortrait.total<=0">
                                <i class="iconfont icon-icon"></i>
                                <label>暂无数据</label>
                            </div>
                        </div>
                    </div>

                    <div class="warp">
                        <div class="title_box">
                            <div class="line_box">
                                <span class="line"></span>
                                <span class="title">最新文章</span>
                            </div>
                            <div class="more" v-if="articlePage !=1" @click="changeTheBatch('articleL')">
                                <span>
                                    <i class="el-icon-arrow-left"></i>
                                    上一批
                                </span>
                            </div>
                            <div class="more" v-if="articlePage != articleList.pages"
                                @click="changeTheBatch('article')">
                                <span>
                                    下一批
                                    <i class="el-icon-arrow-right"></i>
                                </span>
                            </div>
                        </div>
                        <div class="article_warp" v-loading="articleLoading" element-loading-text="数据加载中..."
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                            :data="articleList.list">
                            <div class="article_list" v-for="(item) in articleList.list" :key="item.id">
                                <i class="dot"></i>
                                <el-button type="text" @click="goSpaceOthers(item,'article')"
                                :title="item.title"><span
                                        class="article_title">{{item.title?item.title.slice(0,8)+"...":''}}</span></el-button>
                                <span class="release_time">{{handleTime(item.creationtime)}}</span>
                            </div>
                            <div class="empty" v-if="articleList.pages<=0">
                                <i class="iconfont icon-icon"></i>
                                <label>暂无数据</label>
                            </div>
                        </div>
                    </div>
                </el-aside>
            </el-container>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import swiper from "@c/swiper/banner.vue";
    import Header from "@c/Header/head";
    import Footer from "@c/Footer/footer";
    export default {
        components: {
            swiper,
            Header,
            Footer
        },
        computed: {
            ...mapState({
                // 用户已关注
                userRecommend: state => state.studentAnsweringModule.userRecommend,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
            })
        },
        watch: {
            userInfo: {
                handler(val, old) {
                    if (old.id == null && val.id) {
                        this.getHttpList("personalSpaceList");
                        this.getHttpList("institutionsList");
                    }
                },
                deep: true
            }
        },
        data() {
            return {
                imgList: [{
                        id: '001',
                        imgUrl: require("../assets/img/男.png")
                    },
                    {
                        id: '002',
                        imgUrl: require("../assets/img/女.png")
                    },
                ],
                imgUrl: "http://topsmart.xyz:1315/",
                defaultImg: 'group1/M00/08/6F/wKgBtF6580-AL2MxAAAxHtLMPLw570.jpg',
                headPortrait: {},
                personalSpaceList: [],
                institutionsList: [],
                articleList: {},
                dynamicPage: 1,
                articlePage: 1,
                dynamicLoading: true, // 最新动态处loading
                personalLoading: true, // 个人空间处loading
                institutionsLoading: true, // 机构空间处loading,
                articleLoading: true // 最新文章处loading
            };
        },
        created() {
            // console.log(this.userInfo)
            // 8教师，6学生，9家长，9527学校，1000班级，100011教研
            this.getHttpArticleList();
            this.getHttpTheLatestDynamic();
            // this.recommend()
        },
        beforeMount() {
            this.getHttpList("personalSpaceList");
            this.getHttpList("institutionsList");
        },
        methods: {
            // 获取到登录用已关注的好友列表
            recommend() {
                this.$store.dispatch('studentAnsweringModule/recommendList', {
                    page: 1,
                    pageSize: 99999
                })
            },
            errorHandler() {
                return true;
            },
            // 个人空间&&机构空间
            getHttpList(params) {
                //默认查全部
                var typeIds = '6,8,9,7,1000,100011'
                if (params == "personalSpaceList") {
                    typeIds = '6,8,9'
                } else {
                    typeIds = '7,1000,100011'
                }
                this.$store
                    .dispatch("homeModule/homeZoneUserList", {
                        typeId: typeIds || this.$route.query.active,
                        page: 1,
                        pageSize: 9,
                        userId: this.userInfo.id
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            if (params === "personalSpaceList") {
                                this.personalSpaceList = res.data.result.list;
                                this.personalLoading = false;
                            } else if (params === "institutionsList") {
                                this.institutionsList = res.data.result.list;
                                this.institutionsLoading = false;
                            }
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    })
            },
            // 最新文章
            getHttpArticleList(params) {
                this.$store
                    .dispatch("articleModule/articleNewest", {
                        draft: "",
                        id: 2,
                        name: "",
                        userid: "",
                        page: params ? params : 1,
                        limit: 6
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            this.articleList = res.data.result;
                            this.articleLoading = false;
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: "warning"
                            });
                            this.articleLoading = false;
                        }
                    })
                    .catch(error => {
                        this.$message.error("服务器内部错误");
                        this.articleLoading = false;
                    });
            },
            // 换一批
            changeTheBatch(params) {
                if (params == 'dynamic') {
                    if (this.dynamicPage < this.headPortrait.pages) {
                        this.dynamicPage += 1
                        this.getHttpTheLatestDynamic(this.dynamicPage)
                    }
                }
                if (params == 'dynamicL') {
                    if (this.dynamicPage > 1) {
                        this.dynamicPage -= 1
                        this.getHttpTheLatestDynamic(this.dynamicPage)
                    }
                }
                if (params == 'article') {
                    if (this.articlePage < this.articleList.pages) {
                        this.articlePage += 1
                        this.getHttpArticleList(this.articlePage)
                    }
                }
                if (params == 'articleL') {
                    if (this.articlePage > 1) {
                        this.articlePage -= 1
                        this.getHttpArticleList(this.articlePage)
                    }
                }
            },
            // 最新动态
            getHttpTheLatestDynamic(params) {
                this.$store
                    .dispatch("dynamicModule/dynamicPage", {
                        limit: 6,
                        page: params ? params : 1,
                        type: 0
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.headPortrait = res.data.result;
                            this.dynamicLoading = false;
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: "warning"
                            });
                            this.dynamicLoading = false;
                        }
                    })
                    .catch(error => {
                        this.$message.error("服务器内部错误");
                        this.dynamicLoading = false;
                    });
            },

            /**
             * 跳转到空间列表
             * @param typeId  0 为个人空间，1 机构空间
             */
            goSpace(typeId) {
                this.$router.push({
                    path: "/space",
                    query: {
                        type: typeId
                    }
                });
            },

            // 关注||取消关注
            handleFollow(followID) {
                if (followID.flag == 0) {
                    this.$store.dispatch('studentAnsweringModule/addFollow', {
                        id: followID.userid,
                        lenve: 1
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('关注成功')
                            this.institutionsList.map(item => {
                                if (item.userid == followID.userid) {
                                    item.flag = 1
                                }
                            })
                            this.personalSpaceList.map(item => {
                                if (item.userid == followID.userid) {
                                    item.flag = 1
                                }
                            })
                            // this.recommend()
                        }
                    })
                } else {
                    this.$store.dispatch('studentAnsweringModule/beanremove', {
                        userId: followID.userid
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('取消关注成功')
                            this.institutionsList.map(item => {
                                if (item.userid == followID.userid) {
                                    item.flag = 0
                                }
                            })
                            this.personalSpaceList.map(item => {
                                if (item.userid == followID.userid) {
                                    item.flag = 0
                                }
                            })
                            this.recommend()
                        }
                    })
                }
            },

            // 去他人空间 或者去对应机构空间
            goSpaceOthers(others, article) {
                this.$store.dispatch('commonModule/checkVisitor', {
                    userId: others.userid
                }).then(res => {
                    if (res.data.code == 200 || this.userInfo.id == others.userid) {
                        this.$store.commit('commonModule/INIT_STUDENTTOSPACE', false);
                        if (others.roleid == null) {
                            others.roleid = others.roleId
                        }
                        if (others) {
                            if (this.userInfo.id && others.userid) {
                                this.$store.dispatch('visitorAllModule/visitorAdd', {
                                    fromuserid: others.userid,
                                    visitorid: others.userid,
                                    type: 4
                                })
                            }
                            // 学校9527 班级1000 教研100011
                            if (this.userInfo.id == others.userid) {
                                this.$store.commit('commonModule/INIT_ISMANAGER', true);
                            } else {
                                this.$store.commit('commonModule/INIT_ISMANAGER', false);
                            }
                            if (others.roleid == 7) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/school/schoolHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 1000) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/class/classHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 100011) {
                                if(!others.xxdm){
                                    this.$message.warning("所选教研信息有误,无教研编号！")
                                    return
                                }
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/research/researchOther/researchOtherHome",
                                    query: {
                                        others: others
                                    }
                                });
                            } else {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: (others.userid == this.userInfo.id) ? article ?
                                        "/students/articleMain" : "/students/studentsHomePage" :
                                        article ? "/otherZone/articleMain" :
                                        "/otherZone/otherZoneHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            }
                        }
                    }else {
                        this.$message.warning('没有访问权限!')
                    }
                })

            },
            // 处理时间
            handleTime(startTime) {
                if (startTime) {
                    let sTime = new Date(startTime);
                    let eTime = new Date();
                    //两个日期相差的毫秒数
                    let interval = eTime - sTime;
                    //定义相差的天数、小时数、分钟数、秒数
                    let day, hour, minute, second;
                    interval /= 1000;
                    day = Math.round(interval / 60 / 60 / 24);
                    hour = Math.round((interval / 60 / 60) % 24);
                    minute = Math.round((interval / 60) % 60);
                    second = Math.round(interval % 60);
                    if (day != 0 && day <= 3) {
                        return day + "天前";
                    } else if (day == 0 && hour > 0) {
                        return hour + "小时前";
                    } else if (day == 0 && hour == 0 && minute > 0) {
                        return minute + "分钟前";
                    } else if (day == 0 && hour == 0 && minute == 0 && second >= 0) {
                        return "刚刚";
                    } else {
                        return startTime.slice(0, 10);
                    }
                } else {
                    return '';
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .main {
        overflow: hidden;
        width: 100%;

        .banner {
            width: 100%;
            overflow: hidden;
            position: relative;
            background: #ababab;

            .search {
                position: absolute;
            }
        }

        .content {
            width: 81%;
            margin: 0 auto;

            .title_box {
                width: 100%;
                box-sizing: border-box;
                padding-bottom: 10px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #dcdcdc;

                &>.line_box {
                    font-size: 16px;

                    &>.line {
                        display: inline-block;
                        vertical-align: middle;
                        width: 3px;
                        height: 20px;
                        background-color: #409eff;
                        margin-right: 8px;
                    }
                }

                &>.more {
                    font-size: 14px;
                    color: #666;
                    cursor: pointer;
                }
            }

            .mainBox {
                padding: 20px 20px 20px 0;
            }

            .rightBox {
                padding: 20px 10px 20px 0;
            }

            .warp {
                background-color: white;
                box-sizing: border-box;
                padding: 10px;
                height: 480px;

                .dynamic_wrap {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 10px 0;
                    position: relative;
                    height: calc(100% - 34px);

                    .dynamic_list {
                        cursor: pointer;
                        display: flex;
                        justify-content: space-between;
                        box-sizing: border-box;
                        padding: 5px;
                        margin-bottom: 10px;
                        background-color: #f2f6fc;

                        .character {
                            width: calc(100% - 60px);
                            text-align: left;
                            box-sizing: border-box;
                            padding-left: 5px;

                            .character_name {
                                margin-top: 5px;

                                font-size: 14px;

                                span {
                                    display: block;
                                    float: left;
                                    margin-right: 10px;
                                }

                                .date_before {
                                    font-size: 12px;
                                    color: #999;
                                    float: right;
                                }
                            }

                            .behavior {
                                margin-top: 5px;
                                font-size: 14px;
                                word-break: break-all;
                            }
                        }
                    }
                }

                .article_warp {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 10px 0;
                    height: calc(100% - 34px);
                    position: relative;

                    .article_list {
                        margin-bottom: 10px;
                        background-color: #f2f6fc;
                        cursor: pointer;
                        text-align: left;
                        box-sizing: border-box;
                        padding: 10px;

                        .dot {
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            vertical-align: middle;
                            background-color: #409eff;
                            margin-right: 20px;
                        }

                        .article_title {
                            font-size: 16px;
                        }

                        .release_time {
                            display: inline-block;
                            float: right;
                            font-size: 14px;
                            margin-top: 4px;
                        }
                    }
                }

                .space_wrap {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    margin: 10px 0;
                    position: relative;
                    // height: calc(100% - 34px);

                    &>.space_list {
                        width: 31.8%;
                        height: 125px;
                        background-color: #f2f6fc;
                        margin-bottom: 8px;
                        margin-right: 8px;
                        display: flex;
                        // justify-content: space-between;
                        border-radius: 4px;

                        &>.head_portrait {
                            box-sizing: border-box;
                            padding: 5px;

                            .portrait {
                                img {
                                    cursor: pointer;
                                }

                                position: relative;

                                .follow_icon {
                                    position: absolute;
                                    bottom: -2px;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    margin: auto;
                                    color: orange;
                                }
                            }

                            .follow {
                                padding-top: 5px;
                                font-size: 14px;
                                color: #999999;
                            }
                        }

                        &>.space_detail {
                            box-sizing: border-box;
                            padding: 5px 0 5px 5px;
                            width: 188px;

                            .people {
                                height: 64px;
                                font-size: 16px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                box-sizing: border-box;
                                padding: 5px 20px 5px 0;
                                border-bottom: 1px dashed;

                                .occupation,
                                .serving {
                                    display: flex;
                                    justify-content: space-between;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }

                                .shiwei {
                                    color: #999;
                                }

                                .serving>.serving_name {
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }

                            .fans_visitor {
                                box-sizing: border-box;
                                padding-top: 5px;
                                font-size: 14px;
                                text-align: left;

                                &>span {
                                    color: #666;
                                    display: block;
                                }
                            }
                        }
                    }
                }

                .empty {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    width: 200px;
                    height: 135px;

                    i {
                        font-size: 48px;
                    }

                    label {
                        font-size: 32px;
                        display: block;
                        width: 200px;
                        margin: 0 auto;
                    }
                }
            }
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }
</style>